<script setup>
import { ref, watch } from 'vue';

// 定义一个价格
const price = ref(10);
// 定义一个数量
const quantity = ref(5);
// 我要侦听价格
watch(
  price,
  (newPrice, oldPrice) => {
    console.log('前', oldPrice);
    console.log('后', newPrice);
  },
  { immediate: true }
);
// 我要侦听价格和数量
watch([price, quantity], (newValue, oldValue) => {
  console.log('前', oldValue);
  console.log('后', newValue);
});

// 对象类型的响应式数据
const user = ref({
  name: 'bingo',
  info: {
    gender: '男',
    age: 18,
  },
});
// 我要侦听对象中的一个属性
watch(
  () => user.value.name,
  (newValue, oldValue) => {
    console.log('前', oldValue);
    console.log('后', newValue);
  }
);
// 我要侦听，一个复杂对象类型。需要配置watch 第三个参数，是一个对象。
watch(
  () => user.value.info,
  (newValue, oldValue) => {
    console.log('前', oldValue);
    console.log('后', newValue);
    console.log('新值和旧值，指向的都是同一个对象', newValue === oldValue);
  },
  { deep: true, immediate: true }
);
</script>

<template>
  <h2>{{ price }}</h2>
  <button @click="price += Math.ceil(Math.random() * 5)">price++</button>
  <h2>{{ quantity }}</h2>
  <button @click="quantity += 2">quantity++</button>
  <h2>{{ user.name }}</h2>
  <!-- <button @click="user.name = user.name + '变'">改name</button> -->
  <!-- 和上面的等价 -->
  <button @click="user.name += '变'">改name</button>
  <h2>{{ user.info.gender }}</h2>
  <button @click="user.info.gender += '变'">改gender</button>
  <h2>{{ user.info.age }}</h2>
  <button @click="user.info.age += 1">改age</button>
</template>

<style scoped></style>
